<template>
  <div style="color: #666;font-size: 14px;">
    <div style="padding-bottom: 20px">
      <b>欢迎你！{{ user.nickname }}</b>
    </div>
      <!--    <div class="block" v-if="!loading">-->
      <!--    <el-carousel :interval="4000" type="card" height="400px" style="width: 80%;margin: 0 auto;">-->
      <!--        <el-carousel-item v-for="item in imgList" :key="item.id">-->
      <!--          <img :src="item.idView" class="image" alt="">-->
      <!--          &lt;!&ndash;        <h3 class="small">{{ item }}</h3>&ndash;&gt;-->
      <!--        </el-carousel-item>-->

      <!--      </el-carousel>-->
      <el-row :gutter="10" style="margin-bottom: 40px">
        <el-col :span="8">
          <el-card shadow="hover" style="height: 100px">
            <el-col :span="12" style="padding: 10px 0;color: #409EFF;font-size: large;text-align: center;">
              <i class="el-icon-user"></i>用户总数
            </el-col>
            <el-col
                :span="12"
                style="padding: 10px;font-size: large;text-align: center;font-weight: bold;color: #409EFF"
            >
                {{userTotal}}
            </el-col>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" style="height: 100px">
            <el-col :span="12" style="padding: 10px 0;color: #E6A23C;font-size: large;text-align: center;">
              <i class="el-icon-goods"></i>商品总数
            </el-col>
            <el-col
                :span="12"
                style="padding: 10px;font-size: large;text-align: center;font-weight: bold;color: #E6A23C"
            >{{merchandiseTotal}}
            </el-col>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" style="height: 100px">
            <el-col :span="6" style="padding: 10px 0;color: grey;font-size: large;text-align: center;">
              <i class="el-icon-alarm-clock"></i>上次刷新
            </el-col>
            <el-col
                :span="18"
                style="padding: 10px;font-size: large;text-align: center;font-weight: bold;color: grey"
            ><time class="time">{{ currentDate }}</time>-->
            </el-col>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <!--        <div id="loadings" style="width:100%;height: 400px;"></div>-->
        <div id="main" style="width:100%;height: 400px;"></div>
        <div id="main1" style="width:100%;height: 600px;margin: 0 auto"></div>
      </el-row>
      <!--    </div>-->
      <!--    <div id="loadings" v-else/>-->
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "Home",
  data() {
    return {
      imgList: [{id: 0, idView: require("@/assets/logo.png")}, {id: 1, idView: ''}, {id: 2, idView: ''}, {
        id: 3,
        idView: ''
      }, {id: 4, idView: ''}],
      loading: true,
      merchandiseTotal: 0,
      userTotal: 0,
      stockCountZero: 0,
      currentDate: new Date(),
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  created() {
    this.load()
  },
  methods: {
    load(){
      this.request.get("user/total").then(
          resA => {
            console.log(resA)
            this.userTotal = resA.data
          }
      )
      this.request.get("merchandise/total").then(
          resB => {
            console.log(resB)
            this.merchandiseTotal = resB.data
          }
      )
      this.request.get("merchandise/stockCountZero").then(
          resC => {
            console.log(resC)
            this.stockCountZero = resC.data
          }
      )
    }
  },
  mounted() {
    this.load()
    // const chartLoadings = document.getElementById('loadings');
    // const loadingChart = echarts.init(chartLoadings);
    // const loadingOption = {
    //         graphic: {
    //           elements: [
    //             {
    //               type: 'text',
    //               left: 'center',
    //               top: 'center',
    //               style: {
    //                 text: '商用厨电设备管理系统',
    //                 fontSize: 80,
    //                 fontWeight: 'bold',
    //                 lineDash: [0, 200],
    //                 lineDashOffset: 0,
    //                 fill: 'transparent',
    //                 stroke: '#000',
    //                 lineWidth: 1
    //               },
    //               keyframeAnimation: {
    //                 duration: 3000,
    //                 loop: true,
    //                 keyframes: [
    //                   {
    //                     percent: 0.7,
    //                     style: {
    //                       fill: 'transparent',
    //                       lineDashOffset: 200,
    //                       lineDash: [200, 0]
    //                     }
    //                   },
    //                   {
    //                     // Stop for a while.
    //                     percent: 0.8,
    //                     style: {
    //                       fill: 'transparent'
    //                     }
    //                   },
    //                   {
    //                     percent: 1,
    //                     style: {
    //                       fill: 'black'
    //                     }
    //                   }
    //                 ]
    //               }
    //             }
    //           ]
    //         }
    //       };
    // loadingOption && loadingChart.setOption(loadingOption);
    const chartDom = document.getElementById('main');
    const myChart = echarts.init(chartDom);
    const option = {
      title:{
        text:"用户注册量"
      },
      xAxis: {
        type: 'category',
        data: ['第一季度', '第二季度', '第三季度', '第四季度']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {

          data: [],
          type: 'line',
          smooth: true
        }
      ]
    };
    this.request.get("/echarts/members").then(res => {
      // option.xAxis.data=res.data.x
      option.series[0].data = res.data

      myChart.setOption(option);
      // option.series[1].data=res.y
    })

    // option && myChart.setOption(option);

    const pieChartDom = document.getElementById('main1');
    const myPieChart = echarts.init(pieChartDom);
    const options = {
      title:{
        text:"商品信息一览"
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            show: true
          }
        }
      },
      toolbox: {
        show: true,
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar']},
          restore: {show: false},
          saveAsImage: {show: true}
        }
      },
      calculable: true,
      legend: {
        data: ['Growth', "价格/元", "库存量/件"],
        itemGap: 5
      },
      grid: {
        top: '12%',
        left: '1%',
        right: '10%',
        containLabel: true
      },
      xAxis:
          {
            type: 'category',
            data: []
          },
      yAxis: [
        {
          type: 'value',
          name: '数量',
          axisLabel: {
            formatter: function (a) {
              a = +a;
              return isFinite(a) ? echarts.format.addCommas(+a) : '';
            }
          }
        }
      ],
      dataZoom: [
        {
          show: true,
          start: 94,
          end: 100
        },
        {
          type: 'inside',
          start: 94,
          end: 100
        },
        {
          show: true,
          yAxisIndex: 0,
          filterMode: 'empty',
          width: 30,
          height: '80%',
          showDataShadow: false,
          left: '93%'
        }
      ],
      series: [
        {
          name: "价格/元",
          type: 'bar',
          data: []
        },
        {
          name: "库存量/件",
          type: 'bar',
          data: []
        }
      ]
    };
    myPieChart.setOption(options)
    this.request.get("/echarts/merchandiseAnalyse").then(res => {
      options.xAxis.data = res.data.x
      options.series[0].data = res.data.price
      options.series[1].data = res.data.stock

      options && myPieChart.setOption(options);
    })

  }
}
</script>
